import React from "react";
import { useState } from "react";
import { MouseEvent } from "react";

// 定义传参类型
interface Props {
  arr: string[];
  title: string;
  // 定义子组件方法,父组件可以获取子组件数据
  handleLog: (item: string) => void;
}

function ListGroup({ arr, title, handleLog }: Props) {
  const [selectIndex, setSelectIndex] = useState(-1);

  const handleClick = (event: MouseEvent) => {
    console.log("print------>event", event);
  };

  return (
    <div>
      <h1>{title}</h1>
      {arr.length === 0 && <p>没找到节点</p>}
      <ul className="list-group">
        {arr.map((item, index) => {
          return (
            <li
              className={
                selectIndex === index
                  ? "list-group-item active"
                  : "list-group-item"
              }
              key={item}
              onClick={() => {
                setSelectIndex(index);
                handleLog(item);
              }}
            >
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default ListGroup;
